<template>
  <div class="department">
    <pageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    >
    </pageSearch>
    <pageContent
      ref="contentRef"
      :contentConfig="contentConfig"
      @newBtnClick="handleNewBtnClick"
      @editBtnClick="handleeditBtnClick"
    >
      <!-- 使用作用域插槽自定义渲染 -->
      <template #leader="scope">{{ scope.row[scope.prop] }}</template>
    </pageContent>
    <pageModal :modal-config="modalConfigRef" ref="modalRef"></pageModal>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
// import pageSearch from './c-cpns/page-search.vue'
import pageSearch from '@/components/page-search/page-search.vue'
import pageContent from '@/components/page-content/page-content.vue'
import pageModal from '@/components/page-modal/page-modal.vue'

import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import useMainStore from '@/store/main/main'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'

// 处理下拉的枚举
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id }
  })
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options.push(...departments)
    }
  })
  return modalConfig
})

// 点击搜索,content的操作
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
// const contentRef = ref<InstanceType<typeof pageContent>>()
// function handleQueryClick(queryInfo: any) {
//   contentRef.value?.fetchPageListData(queryInfo)
// }
// function handleResetClick() {
//   contentRef.value?.fetchPageListData()
// }

// 点击content,model的操作
// const { modalRef, handleNewBtnClick, handleeditBtnClick } = usePageModal()
const modalRef = ref<InstanceType<typeof pageModal>>()
function handleNewBtnClick() {
  modalRef.value?.setModelVisible()
}
function handleeditBtnClick(itemData: any) {
  modalRef.value?.setModelVisible(false, itemData)
}
</script>

<style scoped></style>
